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Beauty by design 


As a standard 


standard 


n. something, such as a practice or a product, that is 
widely recognized or employed, especially because of 
its excellence 


adj. regularly used, widely available or supplied 
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Current Glamor: 
Smoke Out 


Latest Essential: 
When Bad Ideas 
Go Wrong 


Recent ALA: 
Flexible Layouts 
with CSS — fluid 
grids that work. 
Plus Flash Satay. 
Have your Flash 
and standards, to0. 


Recent launch: Fox 
Searchlight 
Pictures (with 
Hillman Curtis) 


Recent interview: 
SXSW Tech 
Report 


The Independent 
content producer 
refuses to die. 
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COM _ daily report glamorous life classics 


19 December 2002 


[10 am] 


Our new Titanium PowerBook arrived yesterday. Enough said. 


Not just another XHTML/CSS site launch 

Creative Commons hopes to bring sanity to the marketplace of 
ideas—a marketplace hobbled by intellectual property laws that 
discourage sharing and collaboration, reward corporations rather 
than artists, and chiefly exist to insure that no lawyer will ever go 
hungry in America. Creative Commons offers licenses that let you 
"share with the world while protecting yourself.” An animated short 
explains why the group exists and how its licenses can help creative 
people publish securely. Oh, yeah, and the simple yet attractive site 
was created in XHTML and CSS, like any smart new site ought to be. 


18 December 2002 
[2 pm | 11 am] 


My Glamorous Life Number 76 has generated heaps of reader mail, 
probably because it explicitly requested "no mail.” 


Design this: the W3C Remix 

WThRemix challenges designers, coders, and IAs to create a 
redesign for the W3C homepage that is appropriately branded, 
intuitively navigable, organizes its content with the user in mind, and 
looks great—in other words, a W3C that will inspire people who 
create websites. We موعن‎ vou to read about and support this contest 
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navigation 
Eric's page 
Speaking 
Writing 
Books 

CSS info 
css/edge 
Kat's page 
Miscellaneous 


site home 
resentation 


basic styles 
grayscale 
natural 
lunar sky 
darkfall 
basic variant 
boxy 


Advanced setup... 


Eric A. Meyer 
eric@meyerweb.com 


The professional bio: 


Eric A. Meyer has been working with the Web since late 1993. He is currently employed as a Standards 
Evangelist with Netscape Communications while living in Cleveland, Ohio, which is a much nicer city than 
you've been led to believe. A graduate of and former Webmaster for Case Western Reserve University, 
Eric coordinated the authoring and creation of the W3C's CSS Test Suite and has recently been pushing the 
limits of CSS-based design as hard as he can on his site css/edge and acting as List Chaperone of the 
highly active css-discuss mailing list. Author of " 5 finitiv uide" (O'Reilly ₪ 
Associates) and " E rammer's Reference” (Osborne/McGraw-Hill) and the fairly well-known CSS 
Browser Compatibility Charts, Eric speaks at a variety of conferences on the subject of standards, CSS 
use, and Web design. He is also the host of "Your Father's Oldsmobile," a weekly Big Band-era radio show 
heard on WRUW 91.1-FM in Cleveland. When not otherwise busy, Eric is usually bothering his wife Kat in 
some fashion. 


Like it says on my résumé, I've been a member of the information technology departments of a consulting firm, a 
university, a law publishing firm, and a pharmaceuticals company (that was from most to least recent). I've also been 
a radio announcer for WRUW-FM 91.1, an amateur actor and theater crewperson, a drummer, and a burger-flipper. 1 
have a deep interest in cinematography, 1 cook, 1 read, 1 listen to a wide range of music, and 1 have 3 B.A. in History, 
as well as minors in astronomy, English, and artificial intelligence. My hair is red, my eyes are blue, and I'm 
approximately six feet tall. 


What keeps me busy? Quite a lot. 


Cascading Style Sheets (CSS) 
Between writing an O'Reilly book on the subject, my articles for Web Review and the O'Reilly Network, the CSS 
browser support charts 1 maintain, my work with the World Wide Web Consortium (W3C), teaching CSS courses 
for the HTML Writers Guild and others, and general particpation in various CSS forums (including css- 
discuss), I've built up a reputation for knowing a thing or two about CSS. 


Speaking 
I discovered at some point that 1 really enjoy travelling to other places, getting up in front of groups of people, 
and talking about subjects 1 know well. So far, presentations have happened in the United States, Europe, and 
Australia. Currently seeking opportunities on the other four continents (maybe the South Pole needs a better 
Web site!) in addition to your city. Interested? Let's talk. 


Writing 
This area offers every piece of writing I've ever done and felt comfortable with releasing into the public eye. 
This includes my many professional articles on the topic of CSS (mostly the series "A Sense of Style"), a 
smattering of commentary pieces, and bits of what 1 like to think is humorous writing. Your opinion may differ. 


Your Father's Oldsmobil 
Every Wednesday morning, I do a two-hour radio show on WRUW-FM 91.1. The show covers music recorded 
between 1920-1950, roughly speaking, so you can enjoy big band, swing, blues, jazz, and other gems from 
that period. Thanks to our streaming audio, you can hear the show anywhere in the world-- assuming you're 
awake between 1200 and 1400 GMT (subtract one hour during American daylight savings time). 


You may note that many of us are involved in one way or another with the 
various companies whose browsers we review. It would be sensible, therefore, 
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absolute 


Much effort has been made 
to ensure that the layouts in 
the BlueRobot Layout 
Reservoir appear as 
intended in CSS2 compliant 
browsers. The content should 
be viewable, though 
unstyled, in other web 
browsers. If you encounter a 
problem that is not listed as 
a known issue, 1 am most 
likely not aware of it. Please 
email me a heads-up. Your 
help will benefit the other 
five or six people who visit 


this site. 


With the popularity of three column layouts, this layout is bound to be useful to many. You may have 
seen this technique used at dynamic ribbon device. In fact, this "flanking menus" technique was 
devised by BlueRobot for that site. Surprisingly, the technique has caused quite a bit of talk. The 
concept is simple: a content box with large margins is flanked by two additional (menu) boxes. 


An important benefit of this technique is the order of elements in the HTML source. Here, the order is 
essentially content, menu one, menu two. For old browsers, text-only browsers, screen-readers, and 
many alternative devices, this means that the content is displayed before the menus. And, after all, 
most users visit a page for ¡ts content. 


Known Issues 
This layout fails in 1E4.5/Mac. That browser has poor support for CSS absolute positioning, yet it 


recognizes and executes the CSS @import statement used to hide CSS from broken browsers. 


Currently, there is no known solution. 


< Return to the Layout Reservoir :: View the CSS 


A List Apart 
Greasy Skillet 
Roy Rosenow 
SwankyAl 
Fake Link One 
Nothing Here 
Links Nowhere 
Fake Link Four 
Fifth Fake Link 


LAYOUT TECHNIQUES: 3 columns, the holy gra 


leftcontent centercontent rightcontent 


#leftcontent { #centercontent { *rightcontent ( 
position: absolute; background:#fff; position: absolute; 
left:10px; margin-left: 199px; right:10px; 
top:50px; margin-right:199px; top:50px; 
width:200px; border:lpx solid #000; width:200px; 
background:#fff; voice-family: "\"}\""; background:#fff; 
border:lpx solid #000; voice-family: inherit; border:lpx solid #000; 
$ margin-left: 20lpx; } 
margin-right:201px; 
} This page Is part of CSS Layout 
html>body #centercontent { Techniques, a resource for web 
margin-left: 201px; developers and designers. 


margin-right:20lpx; Other Layout Techniques: 
} 3 columns, the holy grall 
ma / 2 columns, ALA style 
This is the most elegant technique and perhaps the most sought after layout: a 3 column page 4 columns, all fluid 


with a fluid center column. Easy to understand, easy to implement. 1 first saw this layout at 3 columns, all fluid 
dynamic ribbon device and have since learned that the sweet CSS came from Rob Chandanais | static width and centered 
of BlueRobot. Owen also made a very nice tutorial using this layout technique. nested float 


Read about the IESx PC workaround in use on this page here. Dons It validate? 


Scroll down for the source. 
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1 2ت‎ Fun for the Kiddies 
Cryptographic coloring 
books, drug-sniffing dog 
cartoons and spy-satellite 
sing-alongs are what you'll 

find on cl rient government sites. 


HOT OFF THE WIRE 


More Breaking News 


WI-FI HOT SPOT DIRECTORY 


Search for Wi-Fi hot spots 
near you: 


Enter U.S. ZIP code \ Go J 


IT'S YOUR WORLD 


Newsletters | PDA | RSS 
Choose how Wired News gets delivered 
to you. 


Rants & Raves 

Readers on how everyone is digital 
fears of passport chips games in the 
metaverse and more 

Corrections 


Recent revisions to our articles. 
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(a) TOP STORIES 


Weather Data for the Masses 

The U.S. government's weather data is now available in a more 
friendly XML format, so everyone can make use of it. By Daniel 
Terdiman. 


Napster Star Changes His Tune 

Z Napster creator Shawn Fanning is trying to make 
peace with the music industry. His newest venture will 
help the record labels and peer-to-peer networks work 
together to create new digital music businesses. By 


screens, cams, phones, games and gadgets of the 
year, from Wired magazine. 


Navy Probes New Iraq Photos 

An online photo album showing Navy SEALS with Iraqi prisoners 
prompts an investigation. A military prosecutor says they're simply 
evidence of juvenile behavior, but they may violate the Geneva 
Convention, which prohibits souvenir photos of prisoners of war. 


How Long Is Your Digital Trail? 

Relationships in the information age work 
best when you exercise restraint and courtesy. 
Especially after you break up. Commentary by Regina 
Lynn. 


Final Round in Cable-ISP Fight 
The U.S. Supreme Court has agreed to hear whether cable 
operators must give access to their lines to third-party ISPs. 


over 80% a 


"This is a really weird case." 
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Gadgets and Gizmos 
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Autopia 


Calibrating the future of cars 


The Final Frontier 
To the moon, and be 


Culture (nor: 
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and dance 


Business [Hore 


Onze core business is websites. 


Onze focus ligt op communicatie. 
Onze kracht zit in design. 


We bouwen gebruiksvriendelijke, toegankelijke websites die uw boodschap 
overbrengen. 


Cinnamon (kaneel) staat voor een kleine toevoeging die een groot verschil maakt in de smaak. Cinnamon Interactive richt zich op de 
elementen van webdesign die de grootste verschillen maken op de websites van haar opdrachtgevers. 


Website Re:d Design gelanceerd Cinnamon en Advies.overheid geven Art Direction en het Web, 

Re:d Design is een ontwerpbureau dat zich een presentatie op het sy mposium Nederlandse versie 

in hoofdzaak richt op architectuur, “Openheid in praktijk Oorspronkelijk gepubliceerd onder de titel 
stedenbouw en interieur. Re:d Design liet Cinnamon is uitgenodigd om samen met “Art Direction and the Web” op A List 
enkele jaren geleden al een site AdviesOverheid.nl te spreken op het Apart, een internet-magazine voor 
ontwerpen en uitvoeren door Cinnamon, symposium ‘Openheid in de praktijk’, webdesigners. Cinnamon's creative 

en besloot dat het nu tijd was om nog gehouden op 4 november in het World director Stephen Hay schrijft in dit artikel 
meer met hun site te gaan doen. Trade Center in Rotterdam. Het over de technieken van de art director in 
Lees meer... symposium wordt georganiseerd door relatie tot websites. Lees meer... 


05055. Lees meer... 
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Super-Charged Matchups GO + Forgot your p 
GE It's no shock playoff pushes 


IATCH CO : 
BASKETBALL LIVE quickened the Week 13 pulse. ¿A HOR لل ا‎ 
eers n eers But few predicted the Chargers' # 


slim defeat of the Broncos 

would electrify the AFC West. And the 
Eagles lit up the Packers in what was 
expected to be a NFC postseason peek 
Leaders | Fantasy Dozen | Sunday stud 
٠ Steelers at Jaguars (ESPN ) 


Full Court Games 


Are you 
HDTV ready? 


ESPNEWS Headlines 
+ Falcons fail to clinch South | Ravens stunned Click links below for Videos + 
* Colts score another 40-plus | Pennington a lift 


٠ Aaron on Bonds: No matter what, ‘It's wrong’ HA» m د‎ 1 


» NBA clears way for brawl grievance hearing 
* Utah's Sanford hired by UNLV | Meyer's deal 
* Colonials upend No. 12 Terps | Arizona wins 
* ND women get their kicks winning NCAA title 


Videos For: Top Videos a 
+ McNabb and Eagles soar over Packers 
+ Pennington returns to control in Jets win 
+ GameDay: Cutting trough the BCS mess 
+ Tillman's final tragic moments כ‎ et دعم‎ EEE ROT EER TO 
+ USC wins Pao-10 … Hokies grab ACC bid 


The BCS gave some teams reason to rejoice, but once again 
provided fuel for its critics' fire. USC and Oklahoma can cheer 
their Orange Bowl berths, but can't deny also-perfect Auburn 


Rumors: Red Sox, Yankees top Pavano's list 
got shafted. Only Utah's Fiesta selection won't ignite debate. 9 E 


+ 
James: Suns have best ‘spurt ability’ in NBA More Videos: 1-5 | 6-8 
>Mac users, tell us what you think 


+ Vote: Who'll win? | Orange | Sugar | Fiesta | Rose | Schedule More Headlines | Daily Headlines E-mail | Wire 


ESPN.com Top Searches Wacana to MyESPN] 


Infirmary | Final BCS | Buffaloed? MyESPN allows you to personalize your 

3 ESPN.com experience. Positioned on the right 
prona raams MD FANTASY side of the home page, and major sport pages, 
MyESPN will deliver up to the minute information 
on YOUR favorite teams. Best of all, it's 
absolutely FREE! 


Simmons: Let's Cash In! 
Early playoffs are easy pickin's 


Li ¿de Whitlock: Free Jeff George To get started right now and access all of your 
Rashad McCants' ESPN.com didn't Phil Mickelson's Take it easy on the guy favorite teams, simply register for an ESPN.com 
performance against Include Yolanda Masterful putt ranked account. 

UK on Saturday Palge on Its list of first on the Weekly Iil-Advised: Southern Cal's Matt Leinart 

shows he's matured the top point guards. 18's list of golf's USC QB chooses between felines and females Othenwise, you can customize MyESPN to 

Into a polished star. Maybe It should best shots of 2004. receive localized sports information by setting 
₪ have your zip code. 


₪ e MyESPN FAQ 
e Send us your feedback 


ESPN savings 


50 KB 
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61 terabytes/month 
730 terabytes/year 
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What the heck is 329 terabytes? 


a design; 


Zen 


The Beauty of CSS Design 
Garden 


The Road to Enlightenment 
A demonstration ofwhat Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, and 


broken CSS support. 
can be accomplished 


Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the 
tireless efforts of folk like the W3C, WaSP and the major browser creators. 


visually through CSS-based 


design. Select any style 
The ess Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin 


to see with clarity. Learn to use the (yet to be) time-honored techniques in new and invigorating 
into this page. fashion. Become one with the web. 


sheet from the list to load it 


Download the sample So What is This About? 
There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, 


inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on 
any one will load the style sheet into this very page. The code remains the same, the only thing that has 
changed is the external .css file. Yes, really. 


html file and css file 


CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people 
excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To 
date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. 
This needs to change. 


Participation 
Graphic artists only please. You are modifying this page, so strong CSS skills are necessary, but the example files are commented well 


enough that even CSS novices can use them as starting points. Please see the CSS Resource Guide for advanced tutorials and tips on 
working with CSS. 


You may modify the style sheet in any way you wish, but not the HTML. This may seem daunting at first if you've never worked this way 
before, but follow the listed links to learn more, and use the sample files as a guide. 


Download the sample html file and ess file to work on a copy locally. Once you have completed your masterpiece (and please, don't 
submit half-finished work) upload your .css file to a web server under your control. Send us a link to the file and if we choose to use it, 
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lopers Solutions Downloads 


Macromedia Video Kit. 
Easily add video to your site with Dreamweaver. 


Business Solutions » 
Captivate Available 
Effortiessly create interactive 
simulations and software ae 
= demonstrations Ends December 31. 
We've developed a range of better ways to B Learn more > 
1 uy now > 
get business done over the web. 


» Simpler web conferencing and training 
lishi » 
A had Studio MX 2004 Director MX 2004 Meet Captivate 
» eLearning that works 
Flash MX 2004 Flex 1.5 


» Rich Internet Applications Meet Captivate 


More business solutions > Dreamweaver MX 2004 Breeze Tarewoludon ar Robobeno: 


Fireworks MX 2004 Contribute 3 Buy now < 
Solutions » FreeHand MX Authorware 7 


ColdFusion MX JRun 4 
Business Rich Internet Apps Central Captivate 


Free video kit with 


Build Your Own Suite 


Government eLearning RoboHelp X5 FlashPaper 2 NEET 
K-12 Education Rich Media Ads Web Publishing System up to 25% 


Higher Education Accessibility Ends December 9. 


1 Shop now > 
Students Partners All products » Macromedia Store » 


Shortcuts سيد‎ 
Online Live Seminars 


3 - כ<תתתהה‎ D load Flash PI Learn more about Breeze, 
Developer Center » ownload Flash Player ColdFusion, Contribute, 
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Mikrokosmos-Tipp | 01. Dezember 2004 
BERGDOHLE MIT KLANGBILDERN 


Tächa spielen Freitag und Samstag live im Hotel Harder 
Minerva, Interlaken 


Tächa, die Bergdohle, die über Wengen kreist, gab der Band und 
Ihrem Projekt den Namen. » 


MOUNTAIN MULTI MEDIA 


a WEITERE NEWS: MEDIENSPIEGEL: 
MEDIENINTEGRATION Presseschau | 30. November 2004 www.persoenlich.com | 03. Dezember 2004 
«Messen uns nicht mit St. Moritz» » CH-Zeltungsverleger: Zeichen der Zeit nicht 


Carte Blanche | 25. November 2004 erkannt » 


The ugly Americans » www.journalismus.com | 02. Dezember 2004 
Verleger Gossweller: Zukunft der schweizer 
Zeitung liegt Im Lokalen » 


Mikrokosmos-Tipp | 24. November 2004 
Welhnachtsduft Im Schnitzlerdorf » 
KONTAKT Werbewoche | 23. September 2004 


P hi 4 
resseschau | 23. November 200 Virtuelle Grabsteine, reale Gewinne » 
Luxustempel fur Seminare » 


ANFAHRTSPLAN 


Werbewoche | 23. September 2004 
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Search for: $) C Yahoo! Search — 


Ņ + Advanced 
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2004 Holiday Gift Center - from Yahoo! Shopping 


It's more than what's on TV, it's what's in it. 


TV buying tips from 3M - Ad Feedback 


In the News 3:22pm, Sun Dec 5 


* 68 Iraqis die in weekend insurgent attacks 
* Egypt frees Israeli spy in prisoner swap 

* Musharraf: Bin Laden's location is unknown 
* Rescuers aid victims of Philippines storms 
* Report: Jackson DNA sample collected 

* Milk vending machines installed in schools 
* Mobile operators seek higher sound quality 
٠ NFL - Scores - Standings | NBA - Tennis 


Sports » Stocks - News + Popular 


Enter City or U.S. Zip Code 


M Save location on this page 


(Go 


A flurry of holiday savings 
Staples has everything you need 
to go digital this holiday season. 
See the great deals now. 


HP Photosmart 8450 Printer - Featuring eight- 
ink color technology - Shop now. 
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25% off at AllPosters.com - Today only. Every 


on the Web + 


poster and art print - Act now. 


Yahoo! Travel - Flights, Hotels, Cars, Vacations, Cruises 


Free mail Mail status: Sign In 
Autos Horoscopes Movies Real Estate 

Chat HotJobs Music Shopping 
Finance Kids My Yahoo! Sports 

Games Mail News Travel 

GeoCities Maps People Search TV 

Groups Messenger Personals Yellow Pages 
Health Mobile Photos 


All Y! Services... 


Yahoo! Personals New season, new someone? 


I'm a Woman +) seeking a | Man 3 


City, State, or ZIP: 
Age: to 
ll | Find my match | 
LA Free Personality & Love Style Test | 


Yahoo! Small Business Yahoo! Featured Services 


Web Hosting Sell Online 
$4.98 Domains Search Listings 


Personal Website 
Live NCAA Audio 
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HotJobs 
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Weekend Movies 


Buzz Log - What the world is searching for 
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» More Entertainment 


* In Theaters: ‘Closer,’ ‘National Treasure’ & more 
* Preview this week's new ‘Arrested Development’ 
* LAUNCH Artist of the Month: Snoop Dogg 

* Movie Trailers - Daily Horoscopes - Comics 


» More Buzz 


A new Nintendo for junior? See which goodies kids 
are searching for this holiday season. More... 

Top Searches From Kids 
1. Half-Life 2 
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CSS Vault Style Gala Unmatched Style 
stylegala.com unmatchedstyle. com 


cssvault.com 
— 


CSS Beauty Web Standards Awards CSS Import 
cssbeauty.com webstandardsawards.com cssimport.com 


Accomplishments 


* Purified data and content 

* Proven viable (com, gov, edu) 
* Reduced file sizes 

* Accessibility on the radar 

* Modular thinking 


* Higher expectations 


Mistakes 


Boxy design 


over-reliance on the box model 
and making the box VISIBLE 


Image replacement 


2 nn Y 
In the beginning... 


Presentational class & id names 


AVOID USE INSTEAD 
large page-title 
redtext subhead 
top-line main 
borderedbox module 


rightcol secondary 


Imitation 
— Innovation 


= Stagnation 


Five years? 


CSS! 
SY Y Y 
2001 2003 2005 2007 2009 


2000 2002 2004 2006 2008 


CSS3 viability? 


* Modularization 

* Specification delays 

* Software vendor implementation 

* User adoption of new technology 

* Designer/developer learning curves 


Interesting bits of CSS3 


* Target properties for links 
* Sophisticated media queries 


e media="screen and (min-device-width:800px)" 
٠ media="not handheld” 


* Border images 

* Multiple background images per element 
* content property (true IR) 

* The COLUMN Model 


Imagine if... 


people could make use of CSS blindly... 
without ever viewing, writing, or editing 
one line of CSS. 


Imagine if... 


one style sheet could be interoperable 
لسعم تسعد ו‎ 
A o 
thousands of sites. 


Imagine if... 


the distribution model for browser software 
changed dramatically. 


